<template>
	<view class="feature-menu">

		<public-header :title="title"></public-header>
		
		<view class="bottom-content-box">
			
			<view class="content-box">
			
				<view class="title-top">
					<text class="left-title">
						 {{headerLeft}}
					</text>
						<view class="right-button">
								<slot name="headerRight"></slot>
								<!-- <u-button size="large" text="查看操作日志"></u-button> -->
						</view>
			
				</view>
			
				<view class="container">
								<slot name="content"></slot>
				</view>
			
			</view>
			
		</view>
	

	</view>
</template>

<script>
	export default {
      props: {
        headerLeft: {
          type: String
        },
       title:{
				 type: String
			 }
      },
		data() {
			return {
			
			}
		},
		methods: {
		

				
			},
			onLoad() {

			
			}
		}
</script>

<style lang="scss" scoped>

	.bottom-content-box{
			background: rgba(245, 245, 245, 1);
			padding: 4.5rem 6rem;
			height: 100%;
			overflow: hidden;
	}



	.feature-menu {
		// background-color: $retail-color-primary;
		// width: 100%;
		height: 100vh;
    width: 100%;
		width: calc(100vw - 0rem);
		// min-height: calc(100vh - 25rem); // height: 100vh;
		// width: calc(100vw - 20rem);
		// height: calc(100vh - 12rem);
		// padding: 0rem 6rem;
		// height: calc(100vh - 6rem);
		padding-top: 6rem;
		color: #333;
		// font-size: 18px;
		display: flex;
		background: rgba(255, 255, 255, 1);
		// flex-direction: row;
	}





	.relative-box {
		position: relative;

		.addIcon {
			position: absolute;
			width: 41px;
			height: 55px;
			left: 77px;
			top: 65px;
		}
	}

 .bottom-content-box{
	 width: 100%;
 }


	.content-box {
		padding: 3rem 3rem;
		display: flex;
		flex-direction: column;
    background: white;
		width: 100%;
		height: 100%;


		.title-top {
			display: flex;
			justify-content: space-between;
			 padding: 3rem 0rem;
			font-size: 12rem;

			.right-button {
				font-weight: 500;
			}

			.left-title {
				font-size: $retail-font-size-lg;

				font-weight: 700;
				color: #333333;
			}

		}

		.container {
			width: 100%;
			flex: 1;
			overflow-y: scroll;

			.menu-tow-box {
				border-radius: 4rpx;
				// box-shadow: 0px 1px 2px #666;
				position: relative;
				margin-bottom: 1.1rem;
				padding-top: 25px;

				.top-content {
					display: flex;

					.right-content {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.item-font {

							font-size: 2.7rem;
							font-weight: 500;

						}
					}
				}


				.bright-content {
					.menu-card-item {
						border-top: 1px solid #c8cdcf;
						border-bottom: 1px solid #c8cdcf;
						margin-bottom: 20px;
						border-radius: 4px;
						padding: 28rpx 102rpx;
						height: 252rpx;

						.right-content {
							padding-left: 60rpx;
							display: flex;
							align-items: center;
							height: 100%;
							font-size: $retail-font-size-lg;
							font-weight: 700;
						}
					}
				}

				.image-icon {
					width: 189rpx;
					height: 192rpx;
				}

				.bottom-content {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 70px;

					.text {
						font-weight: 700;
						font-size: 3rem;
						color: rgba(56, 192, 158, 1);
					}
				}
			}

		}


	}
</style>
